<template>
  <tr>
      <td><input v-model="item.checked" type="checkbox"></td>
      <td>{{ item.name }}</td>
      <td>{{ item.price }}</td>
      <td>
          <button @click="reduce">-</button>
          <span>{{ item.num }}</span>
          <button @click="add">+</button>
      </td>
      <td>{{ total }}</td>
      <td><button @click="del">删除</button></td>
  </tr>
</template>

<script>
export default {
    props: ['item','index'],
    methods: {
        reduce() {
            if(this.item.num <= 1) return
            this.item.num--
        },
        add() {
            this.item.num++
        },
        del() {
            this.$emit('del',this.index)
        }
    },
    computed: {
        total() {
            return this.item.num * this.item.price
        }
    }
}
</script>

<style>

</style>